<template>
	<view class="page">
		<u-navbar :is-back="true" :custom-back='goBack' title="添加白名单成员" title-color='#fff' :background="background"
		 back-icon-color='#fff'>
			<view class="slot-right" style="width: 100%;display: flex;justify-content: flex-end;">
			</view>
		</u-navbar>
		<view class="" style="padding: 5px 12px;">
			<view class="" style="background-color: #FFEDDB; color: #FF9900; padding: 10px; text-align: center;">
				有效时间<text>{{dataDic.validTimeStart}}</text>
				至<text>{{dataDic.validTimeEnd}}</text>
			</view>
			<view class="" style="background-color: #fff;padding: 10px; text-align: center;">
				<view style="margin-bottom: 20px;">支付宝扫码加入</view>
				<!-- <vue-qr :logoSrc="imageUrl" text="xxx" :size="200"></vue-qr> -->
				<!-- <div class="qrcode" ref="qrCodeUrl"></div>	-->
				<view class="qrimg">
				    <tki-qrcode
				    ref="qrcode"
				    :val="val"
					:size="size"
				    background="#000"
				    foreground="#fff"
				    pdground="#fff"
				    :onval="onval"
				    :loadMake="loadMake"
				    :showLoading="showLoading"
				    loadingText="二维码生成中"
				   />
				</view>
				<view class="">
					二维码区域
				</view>
				<!-- </view> -->
				<view style="border-bottom: 1px solid #e5e5e5;padding-bottom: 1em;">{{dataDic.shopName}}</view>
				<view style="border-bottom: 1px solid #e5e5e5;padding: 1em 0;">
					可再加入<text style="color: #02AF74;">{{dataDic.amount}}</text>人
				</view>
				<view style="padding: 1em 0; color: #02AF74;">
					优惠时长<text>{{dataDic.freeTime}}</text>小时
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="js">
	import {
		getWhiteListUrl
	} from '../../utils/uniApi.ts'	
	import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
	export default {
		components: {tkiQrcode},
		data() {
			return {
				val:'', //要生成的二维码值
				size:200, //二维码大小
				backgroundColor: '#fff', //背景色
				foreground:'#000', //前景色
				pdground:'#000', //角标色
				icon:'../../static/logo.png' ,//二维码图标
				iconsize:45,//二维码图标大小
				lv:3,//二维码容错级别
				onval:true,//vak值变化时自动重新生成二维码
				loadMake:true,//组件加载完成后自动生成二维码
				src:'', // 二维码生成后的图片地址或base64
				showLoading:true,
				background: {
					backgroundColor: '#02AF74'
				},
				dataDic: {},
				whiteDic: {},
			}
		},
		onLoad(options) {
			if (options.whiteList) {
				this.whiteDic = JSON.parse(options.whiteList)
			}
		},
		mounted() {
			// this.creatQrCode();
		},
		onShow() {
			this.WhiteListUrl()
		},
		onHide() {
			uni.hideLoading();
		},
		methods: {
			//生成二维码
			// https://e.yhhuoxing.com/mp/wl/1334024797440987137/123456
			// creatQrCode() {
			//   var qrcode = new QRCode(this.$refs.qrCodeUrl, {
			//       text: 'https://e.yhhuoxing.com/mp/wl/1334024797440987137/123456',
			//       width: 100,
			//       height: 100,
			//       colorDark: '#000000',
			//       colorLight: '#ffffff',
			//       correctLevel: QRCode.CorrectLevel.H
			//  })
			// },
			goBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			//获取二维码列表
			WhiteListUrl() {
				uni.showLoading({
					title: "加载中",
				});
				let params = {
					userId: uni.getStorageSync("userId") == "" ? "" : parseInt(uni.getStorageSync("userId")),
					whiteListId: this.whiteDic.id, //白名单ID
				};
				getWhiteListUrl(params).then((res) => {
					// console.log("++++++++二维码:", JSON.stringify(res.data));
					uni.hideLoading();

					if (res.data.code == 200) {
						this.dataDic = res.data.data
						this.val=res.data.data.url
					} else {
						uni.showToast({
							title: "请求失败",
							icon: "none",
							duration: 2000,
						});
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #02AF74;
	}
	.qrcode{
		width: 30%;
		margin: auto;
	}
	/deep/.u-border-bottom:after,
	.u-border-left:after,
	.u-border-right:after,
	.u-border-top-bottom:after,
	.u-border-top:after,
	.u-border:after {
		border: none;
	}
</style>
